<template>
  <div class="popover-box" :style="getContainerStyle()">
    <slot name="popover-label">
      <span v-if="label">{{ label }}：</span>
    </slot>
    <div :style="getBoxStyle()">
      <el-popover :width="width" :trigger="trigger">
        <ul class="ul-list" :style="`height: ${height}px;`">
          <li v-for="(item, index) in dataList" :key="index">
            <slot name="li-item" :item="item">
              {{ item }}
            </slot>
          </li>
        </ul>
        <div class="content-wrap" slot="reference" :style="`maxWidth: ${contentWidth}`">
          {{ content }}
        </div>
      </el-popover>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    label: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 200
    },
    trigger: {
      type: String,
      default: 'hover'
    },
    dataList: {
      type: Array,
      default: () => []
    },
    content: {
      type: String,
      default: ''
    },
    contentWidth: {
      type: String,
      default: '200px'
    },
    fontSize: {
      type: String,
      default: '13px'
    },
    fontColor: {
      type: String,
      default: '#85888e'
    },
    // 文本容器高度
    contentHeight: {
      type: String,
    }
  },
  methods: {
    getContainerStyle () {
      const contentHeight = `height:${this.contentHeight ?? 'auto'};`
      const style = contentHeight
      return style
    },
    // 获取容器样式
    getBoxStyle () {
      const maxWidthStyle = `maxWidth: ${this.maxWidth};`
      const fontColor = `color: ${this.fontColor};`
      const fontSize = `fontSize: ${this.fontSize};`
      const lineHeight = `lineHeight: ${this.fontSize};`
      const style = maxWidthStyle + fontColor + fontSize + lineHeight
      return style
    }
  }
}
</script>
<style lang="less" scoped>
.popover-box {
  display: flex;
  align-items: center;
}
.content-wrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ul-list {
  overflow: hidden;
  overflow-y: auto;
  li {
    padding: 5px 0;
    border-bottom: 1px dashed #ccc;
  }
}
</style>
